<template>
	<div class="components-input-demo-presuffix">
		<a-input :placeholder="placeholder" :value="cron" @input="handleinput" :disabled="true" allow-clear>
			<a-icon slot="prefix" type="schedule" title="corn控件" @click="openModal" />
			<a-icon v-if="cron" slot="suffix" type="close-circle" @click="handleEmpty" title="清空" />
			<a-popover title="示意" trigger="hover" slot="suffix">
				<template slot="content">
					{{ this.newcron }}
				</template>
				<a-icon v-if="cron" type="question-circle" title="详情" />
			</a-popover>
		</a-input>
		<AntCron ref="innerVueCron" :data="afterCron" @ok="handleOK" :newdata="newafterCron"></AntCron>
	</div>
</template>
<script>
import AntCron from './AntCron';
import { replaceWeekName } from './validator';
import cronstrue from 'cronstrue/i18n';
export default {
	name: 'ACron',
	components: {
		AntCron
	},
	props: {
		value: {
			required: false,
			type: String,
			default: ''
		},
		placeholder: {
			required: false,
			type: String,
			default: ''
		},
		editval: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			newcron: '',
			cron: this.value,
			afterCron: '',
			newafterCron: ''
		};
	},
	watch: {
		value(val) {
			this.cron = val;
			this.newcron = cronstrue.toString(val, { locale: 'zh_CN' });
		},
		cron(val) {
			this.newcron = cronstrue.toString(val, { locale: 'zh_CN' });
			this.afterCron = replaceWeekName(val);
			this.newafterCron = this.newcron;
			this.$emit('input', val);
		},
		editval: {
			handler(val) {
				this.newcron = cronstrue.toString(val, { locale: 'zh_CN' });
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		openModal() {
			this.$refs.innerVueCron.show();
		},
		handleOK(val) {
			this.cron = val;
			this.$emit('change', this.cron);
		},
		handleinput(evt) {
			this.cron = evt.target.value;
			if (this.cron !== '') {
				this.$emit('change', this.cron);
			} else {
				this.$emit('change', undefined);
			}
		},
		handleEmpty() {
			this.handleOK('');
		}
	},
	model: {
		prop: 'value',
		event: 'change'
	}
};
</script>
<style scoped>
.components-input-demo-presuffix .anticon-close-circle {
	cursor: pointer;
	color: #ccc;
	transition: color 0.3s;
	font-size: 12px;
}
.components-input-demo-presuffix .anticon-close-circle:hover {
	color: #f5222d;
}
.components-input-demo-presuffix .anticon-close-circle:active {
	color: #666;
}
</style>
